<template>
    <div class="admin">
        <el-container style="height:100vh;">
            <el-aside class="el-aside" :width="asideWidth">
                <el-menu
                    default-active="1"
                    @open="handleOpen"
                    @close="handleClose"
                    :collapse="isUnfold"
                    :router="true"
                    class="el-menu">
                    <el-menu-item index="1" route="/admin/user">
                        <i class="el-icon-menu"></i>
                        <span slot="title">用户管理</span>
                    </el-menu-item>
                    <el-menu-item index="2" route="/admin/office">
                        <i class="el-icon-menu"></i>
                        <span slot="title">机构管理</span>
                    </el-menu-item>
                    <el-menu-item index="3" route="/admin/message">
                        <i class="el-icon-menu"></i>
                        <span slot="title">资讯消息</span>
                    </el-menu-item>
                    <el-menu-item index="4" route="/admin/messageType">
                        <i class="el-icon-menu"></i>
                        <span slot="title">消息类型</span>
                    </el-menu-item>
                    <el-menu-item index="5" route="/admin/supplies">
                        <i class="el-icon-menu"></i>
                        <span slot="title">物资管理</span>
                    </el-menu-item>
                </el-menu>

            </el-aside>
            <el-container>
                <el-header class="el-header">
                    <el-row justify="center" align="bottom">
                        <el-col :span="20" class="zhankai" >
                            <i class="icon" :class="isUnfold ? 'el-icon-s-unfold' : 'el-icon-s-fold'" @click="asideUnfold"></i>
                            <h2>校园物资管理系统</h2>
                        </el-col>
                        <el-col class="zhankai" :span="4">
                            <span>未登录</span>
                        </el-col>
                    </el-row>
                </el-header>
                <el-main>
                    <router-view></router-view>
                </el-main>
            </el-container>
        </el-container>
    </div>
</template>

<script>
  export default {
    name: "Admin",
    data(){
      return {
        isUnfold : false,
        asideWidth : "300px", // 展开300
      }
    },
    methods : {
      handleOpen(key , keyPath){
        console.log(key,keyPath);
      },
      handleClose(key , keyPath){
        console.log(key,keyPath);
      },
      asideUnfold(){
        this.asideWidth = this.isUnfold ? "300px" : "100px";
        this.isUnfold = !this.isUnfold;
      },
    }
  }
</script>

<style scoped lang="scss">
    .admin{
        width:100%;
        height:100%;
        /*background-color: yellowgreen;*/
        .el-aside{
            background-color: white;
            transition: width linear 0.4s;
            .el-menu{
                width: 100%;
            }
            .el-icon-menu{
                /*height: 100%;*/
                width: 100%;
                max-width: 40px;
                /*text-align: center;*/
            }
        }

        .el-header{
            background-color: #409EFF;
            > *{
                height: 100%;
                color: white;
            }
            .zhankai > *{
                display: inline-block;
                line-height: 60px;
            }
            .zhankai .icon{
                font-size: 24px;
                padding:0 5px;
            }
        }
    }
</style>
